import React, { isValidElement, cloneElement, memo } from "react"
import { IconLink } from "../icon/index"
import "./style/index.css"

/**
 * 链接
 * @param {object} props
 * @param {string} [props.href] 跳转链接
 * @param {boolean} [props.disabled] 是否禁用
 * @param {'error' | 'success' | 'warning'} [props.status] 不同状态
 * @param {React.ReactNode | boolean} [props.icon] 显示图标，设置为 true 时展示默认图标
 * @param {boolean} [props.hoverable] 悬浮状态是否有底色
 * @param {string | string[]} [props.className] 节点类名
 * @param {React.CSSProperties} [props.style] 节点样式
 * @returns {React.ReactNode}
 */
const Link = memo((props) => {
    const { href, disabled, status = "", icon, hoverable = false, className = "", style, children } = props
    const renderIcon = () => {
        const isShowIcon = isValidElement(icon) || icon === true
        if (!isShowIcon) return null
        if (icon === true) {
            return <IconLink className="text-xs mr-2" />
        }
        return cloneElement(icon, { className: "text-xs mr-2" })
    }
    const render = () => {
        return (
            <a
                className={className + `next-link ${disabled && "next-link-disabled"} next-link-${status ? "is-" + status : ""} ${hoverable && "next-link-hoverless"}`}
                href={href}
                style={style}
            >
                {renderIcon()}
                {children}
            </a>
        )
    }
    return render()
})

export default Link